<template>
  <div class="image-editor-layout">
    <ComponentsBar />
    <Canvas />
    <LayerBar />
  </div>
</template>

<script>
import Canvas from './layout/Canvas'
import ComponentsBar from './layout/ComponentsBar.vue'
import LayerBar from './layout/LayerBar.vue'
import { createCanvas } from './hooks/useCanvas'

export default {
  name: 'imageEditor',
  components: { Canvas, ComponentsBar, LayerBar },
  setup (_, { root }) {
    createCanvas(root)
  }
}
</script>

<style scoped>
  .image-editor-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 85vh;
    min-height: 900px;
    width: 100%;
    min-width: 1400px
  }
</style>